<ul cdkDropList [cdkDropListData]="nodes" #rootList="cdkDropList" (cdkDropListDropped)="drop($event)">
  <li *ngFor="let node of nodes; let i = index" cdkDrag [cdkDragData]="node">
    <div>
      <button (click)="toggleNode(node)">{{ node.expanded ? '-' : '+' }}</button>
      <ng-container *ngFor="let key of displayedColumns">
        <span>{{ getDisplayField(node, 0, key) }}</span>
      </ng-container>
      <button *ngIf="!getChildren(node, 0).length" (click)="deleteNode(nodes, i)">Delete</button>
    </div>
    <ul *ngIf="getChildren(node, 0).length && node.expanded" cdkDropList [cdkDropListData]="getChildren(node, 0)" [cdkDropListConnectedTo]="[rootList]" (cdkDropListDropped)="drop($event)">
      <app-tree [nodes]="getChildren(node, 0)" [displayedColumns]="displayedColumns.slice(1)" [childFieldNames]="childFieldNames.slice(1)" [displayFieldNames]="displayFieldNames.slice(1)"></app-tree>
    </ul>
  </li>
</ul>
